<!--

    1. 随机图片API
    2. 图形验证码生成
-->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">随机壁纸</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary ">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header bg-info">随机壁纸（过程需要一定时间，耐心等待哦！）</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">随机生成一张壁纸，快快保存吧~</h5>
        <p class="card-text"></p>
        <button type="button" @click="getWallPaper" class="btn btn-outline-success">点击生成壁纸</button>


        <!--  旋转提示组件  -->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

    <!--  存放随机壁纸的 img 标签  -->
<!--    <img class="my-image mt-3 img-thumbnail" v-bind:src="imageURL">-->

    <!--  存放壁纸的 3D img 标签   -->
    <div class="photo_03">
      <ul>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <!--                <li><img src="photo/CN-wp5.jpg" alt=""></li>-->
        <!--                <li><img src="photo/CN-wp6.jpg" alt=""></li>-->
      </ul>
    </div>



    <!--    <input type="button" @click="getImage" value="随机头像">-->
    <!--    <input type="button" @click="getImageIdentify" value="随机图片验证码">-->
    <!--    <input type="button" @click="getNickName" value="随机昵称">-->
    <!--    <input type="button" @click="getSentence" value="随机句子">-->
    <!--    <input type="button" @click="getPoem" value="古诗清华">-->

    <!--    <img class="my-image" v-bind:src="imageURL" alt="">-->
    <!--    <img class="my-image-identify" v-bind:src="imageIdentifyURL" alt="">-->

  </div>
</template>

<script>
  export default {
    name: 'RandomImage',
    data () {
      return {
        imageURL: '',
        imageIdentifyURL: '',
        sentence: '',
        poem: {}
      }
    },
    methods: {
      /*  获取随机壁纸  */
      async getWallPaper () {
        this.$('.spinner-border').css('display', 'inline-block')
        const result = await this.$http.get('https://unsplash.it/1600/900?random')
        console.log(result)
        this.imageURL = result.request.responseURL

        if (this.imageURL !== '') {
          this.$('.spinner-border').css('display', 'none');
          this.$(".photo_03").css("display", "block");
        }
      },
      /*  随机图形验证码   */
      async getImageIdentify () {
        /*  存在跨域问题  */
        const result = await this.$http.get('http://hn216.api.yesapi.cn/?s=App.Captcha.Create&app_key=F8464B49D9036F3477747B3C17B26690')
        this.imageIdentifyURL = result.request.responseURL
        console.log(result)
      },
      async getNickName () {
        const result = await this.$http.get('http://hn216.api.yesapi.cn/?s=App.Common_Nickname.RandOne&app_key=F8464B49D9036F3477747B3C17B26690')
        console.log(result)
      },
      async getSentence () {
        const result = await this.$http.get('https://api.66mz8.com/api/quotation.php?format=json')
        console.log(result)
        this.sentence = result.data.quotation
      },
      async getPoem () {
        const result = await this.$http.get('http://api.tianapi.com/txapi/qingshi/index?key=d1032a21949c41bbf6a472ec75a94e2a')
        console.log(result)
        this.poem = result.data.newslist[0]
      }

    }
  }
</script>

<style scoped>

  /*照片墙：3(3D轮博图)
    先做正方形的立体图形，然后在等比放大
   */

  .photo_03 {
    /*width: 1288px;*/
    /*height: 460px;*/
    /*background-color: red;*/
    background: url("../../../../public/image/timg_02.jpg") no-repeat;
    background-size: 1288px 660px;
    padding-top: 200px;
    padding-bottom: 200px;
    /*padding-left: 510px;*/


    /*给需要显示3D效果的父元素添加perspective属性：表示距离该标签的观看距离*/
    perspective: 1200px;


    /*  初始状态是隐藏的，发送请求的图片之后显示出来*/
    display: none;
  }

  .photo_03 ul {
    width: 320px;
    height: 320px;
    /*background-color: red;*/
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    animation: sport 5s linear 0s infinite normal;
  }

  .photo_03 ul:hover {
    animation-play-state: paused;
  }

  .photo_03 ul li {
    list-style: none;
    width: 320px;
    height: 320px;
    text-align: center;
    border: 5px dashed #cccccc;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  /*
      所以的li标签，先旋转，再平移（注意：旋转会改变坐标系）
      一开始所有的 li 标签都是重叠在一起的，然后旋转之后，就会形成一个十字交叉效果
      为了视觉效果更好，还要进行 scale 放大操作
      然后对 li 标签进行平移，形成一个长方形的盒子
  */
  .photo_03 ul li:nth-child(1) {
    transform: rotateX(90deg) translateZ(160px) scale(2, 1);
  }

  .photo_03 ul li:nth-child(2) {
    transform: rotateX(180deg) translateZ(160px) scale(2, 1);
  }

  .photo_03 ul li:nth-child(3) {
    transform: rotateX(270deg) translateZ(160px) scale(2, 1);
  }

  .photo_03 ul li:nth-child(4) {
    transform: rotateX(360deg) translateZ(160px) scale(2, 1);
  }

  .photo_03 ul li img {
    width: 320px;
    height: 320px;
  }

  /*    旋转动画        */
  @keyframes sport {
    from {
      transform: rotateX(0deg);
    }
    to {
      transform: rotateX(360deg);
    }
  }
  /*  ------------------------- 3D 照片墙结束 ---------------------*/



  /*  旋转按钮  */
  .spinner-border {
    display: none;
  }

  img {
    /*width: 400px;*/
  }
</style>
